<template>
    <el-button type="primary" :icon="Download" @click="exportFn">数据导出</el-button>
    <el-table :data="newTableData" style="width: 100%">
        <el-table-column align="center" label="序号" width="60">
            <template #default="scope">
                <span>{{ scope.$index + 1 + (currentPage - 1) * pageSize }}</span>
            </template>
        </el-table-column>
        <el-table-column align="center" label="图片" width="100">
            <template #default="scope">
                <el-image style="width: 100px;" preview-teleported :src="scope.row.img1" :preview-src-list="[
                    scope.row.img1,
                    scope.row.img2,
                    scope.row.img3,
                    scope.row.img4,
                ]" fit="cover" />
            </template>
        </el-table-column>
        <el-table-column align="center" label="名称" prop="proname" width="120">
        </el-table-column>
        <el-table-column align="center" label="品牌" prop="brand" width="80"></el-table-column>
        <el-table-column align="center" label="分类" prop="category" width="80"></el-table-column>
        <el-table-column align="center" sortable label="原价" prop="originprice" width="80"></el-table-column>
        <el-table-column align="center" sortable label="折扣" prop="discount" width="50"></el-table-column>
        <el-table-column align="center" sortable label="销量" prop="sales" width="100"></el-table-column>
        <el-table-column align="center" label="是否秒杀" prop="isseckill" width="180">
            <template #default="scope">
                <el-switch v-model="scope.row.isseckill" :active-value="1" :inactive-value="0" class="ml-2" inline-prompt
                    style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949" active-text="Y"
                    inactive-text="N" />
            </template>
        </el-table-column>
        <el-table-column align="center" label="操作">
            <template #default="scope">
                <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[10, 20, 30, 50]"
        :background="true" layout="total, sizes, prev, pager, next, jumper" :total="tableData.length"
        @size-change="handleSizeChange" @current-change="handleCurrentChange" />
</template>

<script setup lang='ts'>
// 导入权限页面判断
import { nopermission } from '@/utils/nopermission';
nopermission();

// 导入接口
import { getProTypeListApi } from '@/api/pro';
import { onMounted, ref } from 'vue';
onMounted(() => {
    // 初始化获取产品列表
    getprolist()
})
// 当前对象数据类型
interface ItemType {
    banners: string[],
    brand: string,
    category: string,
    discount: number,
    img1: string,
    img2: string,
    img3: string,
    img4: string,
    isrecommend: number,
    issale: number,
    isseckill: number,
    originprice: number,
    proid: string,
    proname: string,
    sales: number,
    stock: number
}
// 当前页数
const currentPage = ref<number>(1);
// 每页条数
const pageSize = ref<number>(10);
// 产品列表数据
const tableData = ref<Array<ItemType>>([]);
const getprolist = () => {
    getProTypeListApi({
        type: 'isseckill',
        flag: 1
    }).then((res: any) => {
        // console.log('res', res);
        tableData.value = res.data

    })
}

// 使用计算属性得到当前页的数据
import { computed } from 'vue'
const newTableData = computed(() => {
    return tableData.value.filter((item, index) => {
        return index >= (currentPage.value - 1) * pageSize.value && index < currentPage.value * pageSize.value
    })
})


// 删除事件
const handleDelete = (index: number, row: ItemType) => {
    // console.log(index, row)
}

// 分页切换每页条数
const handleSizeChange = (val: number) => {
    pageSize.value = val
    // 重新请求数据
    getprolist()
}

// 分页切换当前页
const handleCurrentChange = (val: number) => {
    //console.log('当前页', val);
    currentPage.value = val;
    // 重新请求数据
    getprolist()
}

// 数据的导出功能
import { Download } from '@element-plus/icons-vue'
// 点击数据导出
import ExportJsonExcel from 'js-export-excel';
const exportFn = () => {
    // console.log('newTableData', newTableData);

    var option = {
        fileName: '秒杀列表', // 导出的文件名
        datas: [ // 导出的数据配置
            {
                sheetData: newTableData.value, // 导出的数据源(newTableData)当前页的数据
                sheetName: "表1",  // 表名
                sheetFilter: ["proid", "proname", "brand", "img1", "originprice"], // 导出的数据源中的字段
                sheetHeader: ["proid", "proname", "brand", "img1", "originprice"],
                columnWidths: [20, 20],
            },
            {
                sheetData: newTableData.value, // 导出的数据源(newTableData)当前页的数据
                sheetName: "表2",  // 表名
                sheetFilter: ["proid", "proname", "sales", "stock"], // 导出的数据源中的字段
                sheetHeader: ["proid", "proname", "sales", "stock"],
                columnWidths: [20, 20],
            }
        ]
    };

    console.log();

    var toExcel = new ExportJsonExcel(option); //创建导出的文件
    toExcel.saveExcel(); //文件保存下载
}




</script>
<style scoped lang="scss">
/* 设置溢出省略 */
::v-deep .el-table_1_column_3>div {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.el-pagination {
    margin-top: 20px;
}
</style>
